import React from 'react';
import { Toggle } from '../../components/Toggle';
import { useChromeStorageObject } from '../../hooks/useChromeStorageObject';
import './SettingsTab.css';

export const SettingsSection = ({ settings, setSettings }) => {
  const [localSettings, updateSettings] = useChromeStorageObject('settings', settings || {});

  const handleThemeChange = (e) => {
    const theme = e.target.value;
    updateSettings({ theme });
    document.body.setAttribute('data-theme', theme);
    setSettings({ ...localSettings, theme });
  };

  return (
    <section className="settings-section">
      <div className="section-header">
        <h2>Settings</h2>
      </div>

      <div className="settings-container">
        <div className="setting-item">
          <div className="setting-info">
            <h3>Theme</h3>
            <p>Choose between light and dark mode</p>
          </div>
          <select
            className="setting-select"
            value={localSettings.theme || 'dark'}
            onChange={handleThemeChange}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </div>

        <div className="setting-item">
          <div className="setting-info">
            <h3>Notification Sound</h3>
            <p>Select the sound for reminder notifications</p>
          </div>
          <select
            className="setting-select"
            value={localSettings.notificationSound || 'beep'}
            onChange={(e) => updateSettings({ notificationSound: e.target.value })}
          >
            <option value="beep">Beep</option>
            <option value="chime">Chime</option>
            <option value="bell">Bell</option>
            <option value="none">None</option>
          </select>
        </div>

        <div className="setting-item">
          <div className="setting-info">
            <h3>Browser Notifications</h3>
            <p>Receive system notifications for reminders</p>
          </div>
          <Toggle
            checked={localSettings.notificationsEnabled !== false}
            onChange={(e) => updateSettings({ notificationsEnabled: e.target.checked })}
          />
        </div>

        <div className="setting-item">
          <div className="setting-info">
            <h3>Badge Notifications</h3>
            <p>Show badge count on extension icon</p>
          </div>
          <Toggle
            checked={localSettings.badgeEnabled !== false}
            onChange={(e) => updateSettings({ badgeEnabled: e.target.checked })}
          />
        </div>
      </div>
    </section>
  );
};

